<template>
    <div class="applyLayout">
        <!-- 标题 -->
        <Title>
            <template #default>{{ title }}</template>
        </Title>
        <!-- 内容区 -->
        <section class="contentLayout" v-loading="loading">
            <!-- 表单设置 -->
            <div class="tableSet">
                <div>
                    <el-tooltip content="刷新" placement="top">
                        <el-icon size="19" @click="Refresh">
                            <RefreshRight />
                        </el-icon>
                    </el-tooltip>
                </div>
                <div>
                    <el-tooltip content="密度" placement="top">
                        <el-dropdown
                            ref="dropdown1"
                            trigger="contextmenu"
                            @command="hCommand($event)"
                        >
                            <el-icon size="19" @click="GapSize">
                                <Sort />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="default">
                                        {{ textSize[0] }}
                                    </el-dropdown-item>
                                    <el-dropdown-item command="midden">
                                        {{ textSize[1] }}
                                    </el-dropdown-item>
                                    <el-dropdown-item command="small">
                                        {{ textSize[2] }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-tooltip>
                </div>
                <div>
                    <el-tooltip content="列设置" placement="top">
                        <div>
                            <el-popover
                                placement="bottom-start"
                                :width="200"
                                trigger="click"
                            >
                                <template #reference>
                                    <el-icon size="19" @click="setHeader">
                                        <Setting />
                                    </el-icon>
                                </template>
                                <el-tree
                                    ref="treeRef"
                                    style="max-width: 600px"
                                    :data="headerList"
                                    show-checkbox
                                    node-key="id"
                                    default-expand-all
                                    :expand-on-click-node="false"
                                    check-on-click-node
                                    @check-change="nodeChange"
                                    :default-checked-keys="headerTableList"
                                    :props="{
                                        children: 'children',
                                        label: 'label',
                                    }"
                                />
                            </el-popover>
                        </div>
                    </el-tooltip>
                </div>
            </div>
            <!-- 表单内容 -->
            <div class="tabContent">
                <el-table
                    :data="resumeList.list"
                    style="width: 100%"
                    :size="tableSize"
                    header-cell-class-name="btou"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        width="60"
                        v-if="headerTableList.indexOf(1) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="100"
                        v-if="headerTableList.indexOf(2) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="gender"
                        label="性别"
                        width="60"
                        v-if="headerTableList.indexOf(3) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="birthday"
                        label="出生日期"
                        width="120"
                        v-if="headerTableList.indexOf(4) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="education"
                        label="学历"
                        width="100"
                        v-if="headerTableList.indexOf(5) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="experience"
                        label="工作经验"
                        width="100"
                        v-if="headerTableList.indexOf(6) == -1 ? false : true"
                    >
                        <template #default prop="experience"></template>
                    </el-table-column>
                    <el-table-column
                        prop="salary"
                        label="期望薪资"
                        width="100"
                        v-if="headerTableList.indexOf(7) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="jobStatus"
                        label="求职状态"
                        width="140"
                        v-if="headerTableList.indexOf(8) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="skill"
                        label="个人优势"
                        width="200"
                        v-if="headerTableList.indexOf(9) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="updatedAt"
                        label="编辑时间"
                        width="170"
                        v-if="headerTableList.indexOf(10) == -1 ? false : true"
                    />
                    <el-table-column
                        fixed="right"
                        label="操作"
                        min-width="120"
                        v-if="headerTableList.indexOf(11) == -1 ? false : true"
                    >
                        <template #default>
                            <el-button
                                link
                                type="primary"
                                size="small"
                                @click="handleClick"
                                class="del"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页组件 -->
            <div class="example-pagination-block pageCom">
                <div class="example-demonstration">
                    第 {{ (currentPage - 1) * 10 + 1 }}-{{
                        currentPage * 10
                    }}
                    条/总共 {{ resumeList.total }} 条
                </div>
                <el-pagination
                    layout="prev, pager, next"
                    :total="10"
                    :page-size="10"
                    size="small"
                    :current-page="currentPage"
                    @current-change="currentChange"
                />
            </div>
        </section>
    </div>
</template>
    
<script setup>
import Title from "components/public/Title";
import { useRoute } from "vue-router";
import { getResumeList } from "@/network/resume";
import { onMounted, ref } from "vue";

const route = useRoute();
const title = route.meta.title;

onMounted(() => {
    ResumeList();
});

// 获取简历列表
const resumeList = ref([]); // 简历列表
const resumeListPage = ref([]);
const ResumeList = async () => {
    await getResumeList().then((res) => {
        // console.log(res);
        resumeList.value = res.data.data;
        // 处理时间格式
        resumeList.value.list.forEach((v) => {
            v.updatedAt = v.updatedAt.slice(0, 19).replace("T", " ");
        });
        // 对请求的值为null的属性赋值为 -
        resumeList.value.list.forEach((v) => {
            v.birthday = v.birthday == null ? "-" : v.birthday;
            v.education = v.education == null ? "-" : v.education;
            v.experience = v.experience == null ? "-" : v.experience;
            v.gender = v.gender == null ? "-" : v.gender;
            v.jobStatus = v.jobStatus == null ? "-" : v.jobStatus;
            v.name = v.name == null ? "-" : v.name;
            v.salary = v.salary == null ? "-" : v.salary;
            v.skill = v.skill == null ? "-" : v.skill;
            v.updatedAt = v.updatedAt == null ? "-" : v.updatedAt;
        });
    });
    loading.value = false;
};

// 刷新页面,并重新请求页面
const loading = ref(false); // 刷新
const Refresh = () => {
    console.log("重新请求");
    loading.value = true;
    ResumeList();
};

// 改变表格大小
const dropdown1 = ref(); //显示尺寸按钮
const tableSize = ref("default"); //表格尺寸大小
const GapSize = () => {
    // console.log("间隔大小");
    // console.log(dropdown1.value);
    if (!dropdown1) return;
    dropdown1.value.handleOpen();
};
const textSize = ref(["默认", "中等 *", "紧凑"]);
function hCommand(e) {
    if (e == "default") {
        tableSize.value = "large";
        textSize.value = ["默认 *", "中等", "紧凑"];
    } else if (e == "midden") {
        tableSize.value = "default";
        textSize.value = ["默认", "中等 *", "紧凑"];
    } else if (e == "small") {
        tableSize.value = "small";
        textSize.value = ["默认", "中等", "紧凑 *"];
    } else {
        tableSize.value = "";
    }
}

// 表头中标签的展示和隐藏
const setHeader = () => {
    console.log("表头的展示与隐藏");
};
const treeRef = ref();
const headerTableList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
const headerList = [
    {
        id: 0,
        label: "列设置", // `<button>重置</button>`
        children: [
            // { id: 20, label: "固定在左侧", children: [] },
            {
                id: 30,
                label: "不固定",
                children: [
                    {
                        id: 1,
                        label: "序号",
                    },
                    {
                        id: 2,
                        label: "姓名",
                    },
                    {
                        id: 3,
                        label: "性别",
                    },
                    {
                        id: 4,
                        label: "出生日期",
                    },
                    {
                        id: 5,
                        label: "学历",
                    },
                    {
                        id: 6,
                        label: "工作经验",
                    },
                    {
                        id: 7,
                        label: "期望薪资",
                    },
                    {
                        id: 8,
                        label: "求职状态",
                    },
                    {
                        id: 9,
                        label: "个人优势",
                    },
                    {
                        id: 10,
                        label: "编辑时间",
                    },
                ],
            },
            {
                id: 40,
                label: "固定在右侧",
                children: [
                    {
                        id: 11,
                        label: "操作",
                    },
                ],
            },
        ],
    },
];
// 当节点被点击的时候触发
const nodeChange = (obj) => {
    // console.log(treeRef.value.getCheckedKeys());
    headerTableList.value = treeRef.value.getCheckedKeys();
    // console.log("obj:  ");
    // console.log(obj);
    // console.log(treeRef.value.getNode(20));
    removeNode();
    // if (obj.id > 0 && obj.id < 12) {
    //     treeRef.value.append(obj, 20);
    // }
};
function removeNode() {
    if (
        treeRef.value.getNode(20) &&
        treeRef.value.getNode(20).data.children.length == 0
    ) {
        treeRef.value.remove(20);
    }
    if (
        treeRef.value.getNode(40) &&
        treeRef.value.getNode(40).data.children.length == 0
    ) {
        treeRef.value.remove(40);
    }
}

// 删除操作
const handleClick = () => {
    console.log("click");
    ElMessageBox.confirm("确定删除该记录吗?", "删除记录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            ElMessage({
                type: "success",
                message: "成功删除",
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};

// 分页组件
const currentPage = ref(1); // 当前页数
const currentChange = (page) => {
    currentPage.value = page;
};

const tableData = [
    {
        birthday: "2000-06-12",
        education: "高中以下",
        experience: "10年以上",
        gender: "女",
        jobStatus: 3,
        name: "李佳航",
        salary: "面议",
        skill: "hzhdjshsbjx",
        updatedAt: "2023-08-28T06:04:55.000000Z",
    },
];
</script>
    
<style lang="scss">
.applyLayout {
    .contentLayout {
        padding: 0 24px 16px;
        background: #fff;
        .tableSet {
            padding: 16px 0;
            display: flex;
            justify-content: flex-end;
            & > div {
                padding: 8px;
                .el-dropdown {
                    color: var(--color-text);
                }
            }
        }
        .tabContent {
            .btou {
                background: #fafafa !important;
                font-weight: 500;
                .cell {
                    border-left: 1px solid #0000000f;
                }
            }
            .cell {
                // padding: 12px 8px;
                color: var(--color-text);
            }
            .del {
                color: #1890ff;
                font-size: 14px;
            }
            .el-table_1_column_1:not(.btou) {
                padding-left: 5px;
            }
        }
        .pageCom {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 16px;
            li.is-active {
                border: 1px solid var(--color-high-text);
                font-weight: 500;
            }
            .number {
                font-size: 14px;
            }
        }
    }
}
</style>